{extend name="layout:base" /}
{block name="page_style"}
  <link href="{$site_root}/static/blonkon1.0.4/global/plugins/bower_components/bootstrap-wysihtml5/src/bootstrap-wysihtml5.css" rel="stylesheet">
{/block}
{block name="main_content"}
  <div class="row" id="blog-single">
    <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 article-body">
      <div class="panel panel-blog blog-article rounded shadow">
        <div class="panel-body">
          <h3 class="blog-title">{$article.title}</h3>
          <ul class="blog-meta">
            {if condition="$article.is_origin > 0"}
              <li><span class="by-self">原创</span>By: <a href="">{$article.user_nickname}</a></li>
            {else /}
              <li><span>{$article.origin_author}</span>By: <a href="">{$article.user_nickname}</a></li>
            {/if}
            <li>{$article.update_time|format_show_time=###,'no_second'}</li>
          </ul>
          {notempty name="video_info.sid"}
            <div class="text-center">
              <?php $is_mobile = is_mobile_terminal(); ?>
              {if condition="$is_mobile"}
                {switch name="video_info.type"}
                {case value="youku"}
                  <iframe height=312 width=320 src='http://player.youku.com/embed/{$video_info.sid}' frameborder=0 'allowfullscreen'></iframe>
                {/case}
                {case value="qq"}
                  <iframe frameborder="0" width="320" height="249" src="https://v.qq.com/iframe/player.html?vid={$video_info.sid}&tiny=0&auto=0" allowfullscreen></iframe>
                {/case}
                {/switch}
              {else /}
                {switch name="video_info.type"}
                {case value="youku"}
                  <iframe height=498 width=510 src='http://player.youku.com/embed/{$video_info.sid}' frameborder=0 'allowfullscreen'></iframe>
                {/case}
                {case value="qq"}
                  <iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid={$video_info.sid}&tiny=0&auto=0" allowfullscreen></iframe>
                {/case}
                {/switch}
              {/if}
            </div>
          {/notempty}
          <div id="article-content">
            {$article.content}
          </div>
          {notempty name="article.buy_url"}
            <div class="article-buy-info text-center">
              <a href="{$article.buy_url}" target="_blank">【点击购买摊主现货】</a>
            </div>
          {/notempty}
          <div class="row">
            <div class="col-sm-12 col-xs-12 text-center article-star">
              {if condition="($article.status)"}
                <input type="hidden" id="related_id" name="related_id" value="{$article.id}">
                {if condition="($log_res['user_up_count'] > 0)"}
                  <a href="javascript:void(0);" class="btn btn-add-star btn-theme">
                    <div class="star-icon">
                      <i class="fa fa-thumbs-o-up"></i>
                    </div>
                    <div class="star-count">
                      {$article.star_up}
                    </div>
                  </a>
                {elseif condition="($log_res['user_down_count'] > 0)"}
                  <a href="javascript:void(0);" class="btn btn-add-star btn-default">
                    <div class="star-icon">
                      <i class="fa fa-thumbs-o-up"></i>
                    </div>
                    <div class="star-count">
                      {$article.star_up}
                    </div>
                  </a>
                {else/}
                  <a id="btn-star-up" href="javascript:addStar('up');" class="btn btn-add-star btn-default">
                    <div class="star-icon">
                      <i class="fa fa-thumbs-o-up"></i>
                    </div>
                    <div class="star-count">
                      {$article.star_up}
                    </div>
                  </a>
                {/if}

                {if condition="($log_res['user_down_count'] > 0)"}
                  <a href="javascript:void(0);" class="btn btn-add-star btn-theme">
                    <div class="star-icon">
                      <i class="fa fa-thumbs-o-down"></i>
                    </div>
                    <div class="star-count">
                      {$article.star_down}
                    </div>
                  </a>
                {elseif condition="($log_res['user_up_count'] > 0)"}
                  <a href="javascript:void(0);" class="btn btn-add-star btn-default">
                    <div class="star-icon">
                      <i class="fa fa-thumbs-o-down"></i>
                    </div>
                    <div class="star-count">
                      {$article.star_down}
                    </div>
                  </a>
                {else/}
                  <a id="btn-star-down" href="javascript:addStar('down');" class="btn btn-add-star btn-default">
                    <div class="star-icon">
                      <i class="fa fa-thumbs-o-down"></i>
                    </div>
                    <div class="star-count">
                      {$article.star_down}
                    </div>
                  </a>
                {/if}
              {else/}
                <a href="javascript:void(0);" class="btn btn-add-star btn-default">
                  <div class="star-icon">
                    <i class="fa fa-thumbs-o-up"></i>
                  </div>
                  <div class="star-count">
                    {$article.star_up}
                  </div>
                </a>
                <a href="javascript:void(0);" class="btn btn-add-star btn-default">
                  <div class="star-icon">
                    <i class="fa fa-thumbs-o-down"></i>
                  </div>
                  <div class="star-count">
                    {$article.star_down}
                  </div>
                </a>
              {/if}
            </div>
            <div class="col-md-offset-2 col-md-8 col-sm-12 col-xs-12 text-center">
              <div class="star-avatar-list clearfix">
                {volist name="log_res.list" id="vo"}
                  <a href="javascript:void(0);">
                    <img class="" src="{$vo.user_avatar|show_user_avatar_url=###}" alt="{$vo.user_nickname}">
                  </a>
                {/volist}
              </div><!-- /.mini-stat -->
            </div>
          </div>
        </div><!-- panel-body -->
      </div><!-- panel-blog -->

      <div class="blog-author">
        <div class="media">
          <a class="pull-left" href="{:url('note/personal')}">
            <img class="media-object blog-author-avatar thumbnail" src="{$article.user_avatar|show_user_avatar_url}" alt="{$article.user_nickname}">
          </a>
          <div class="media-body">
            <h4 class="media-heading author-title">{$article.user_nickname}吐槽</h4>
            <p class="author-desc">{$article.user_description|default='这个家伙懒的什么都没写'}</p>
          </div>
        </div><!-- media -->
      </div><!-- blog-author -->

      {include file="comment/article_list" /}
    </div>

    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
      <div class="blog-sidebar">
        {notempty name="take_attrs"}
          <div class="panel panel-theme shadow hidden-xs">
            <div class="panel-heading">
              <h3 class="panel-title right-slider">造物心得</h3>
            </div>
            <div class="panel-body no-padding">
              <div class="list-group no-margin">
                <div class="blog-list article-takes right-slider">
                  {volist name="take_attrs" id="take_attr"}
                    <div class="media">
                      <div class="media-icon pull-left">
                        <span><i class="fa {$take_attr.icon}"></i>{$take_attr.title}</span>
                      </div>
                      <div class="media-body">
                        {$take_attr.field_value|default=''}
                      </div>
                    </div>
                  {/volist}
                </div>

              </div>
            </div>
          </div>
        {/notempty}

        {notempty name="tags"}
          <div class="panel panel-theme shadow hidden-xs">
            <div class="panel-heading">
              <h3 class="panel-title right-slider">标签</h3>
            </div>
            <div class="panel-body">
              <ul class="list-inline blog-tags">
                {volist name="tags" id="tag"}
                  <li>
                    <a class="article-tag" href="{:url('note/index', array('tag_id' => $tag.id))}">
                      <i class="fa fa-tags"></i>{$tag.name}
                    </a>
                  </li>
                {/volist}
              </ul>
            </div>
          </div>
        {/notempty}

        {notempty name="related_articles"}
          <div class="panel panel-theme shadow blog-list-slider">
            <div class="panel-heading">
              <h3 class="panel-title right-slider">最新笔记</h3>
            </div>
            <div id="carousel-blog-list" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="item active">
                  <div class="blog-list right-slider">
                    {volist name="$related_articles" id="art"}
                      <div class="media">
                        <a class="pull-left" href="{:url('read', ['id' => $art['id']])}">
                          <img src="{$art.wap_cover_path|get_thumb_src=###,160}" alt="{$art.title|truncate=###,10}" class="img-responsive img-thumbnail"/>
                        </a>
                        <div class="media-body">
                          <h4 class="media-heading">
                            <a class="related-title" href="{:url('read', ['id' => $art['id']])}" title="{$art.title}">
                              {$art.title|truncate=###,35}
                            </a>
                          </h4>
                          <small class="media-desc">
                            {$art.update_time|format_show_time=###, 'no_second'}
                          </small>
                        </div>
                      </div>
                    {/volist}
                  </div>
                </div>
              </div>
            </div>
          </div><!-- /.blog-list-slider -->
        {/notempty}
        <!-- weixin follow -->
        <div class="panel panel-theme shadow blog-list-slider" id="panel-follow">
          <div class="panel-heading">
            <h3 class="panel-title right-slider">关注我们</h3>
          </div>
          <div id="carousel-blog-list" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="item active">
                <div class="row follow-info hide">
                  <div class="follow-qrcode vcenter">
                    <img src="{$site_root}/static/index/images/weixin_qrcode.jpg" alt="关注我们" class="img-responsive img-thumbnail"/>
                  </div>
                  <div class="follow-content vcenter">
                    【造物笔记】是一个手工艺人的聚合平台，也是一个学习手工、分享手工教程、欣赏及购买手工作品的交流社区。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div><!-- weixin follow -->
    </div>
  </div><!-- row -->

  <div class="modal modal-danger modal-cfm" id="del-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">系统提示</h4>
        </div>
        <div class="modal-body text-center">
          <h4>您是否确定要删除这条评论？</h4>
          <input type="hidden" id="comment_id" value="0">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-danger" onclick="delCommentItem(this);">确定</button>
        </div>
      </div>
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
{/block}
{block name="page_js"}
  <!-- START @PAGE LEVEL PLUGINS -->
  <script src="{$site_root}/static/blonkon1.0.4/global/plugins/bower_components/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.min.js"></script>
  <script src="{$site_root}/static/blonkon1.0.4/global/plugins/bower_components/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>
  <script src="{$site_root}/static/plugins/jquery-validate/jquery.validate.min.js"></script>
  {include file="layout/article_js" /}
{/block}